<!--门禁组管理查看-->
<template>
  <div class="log">
    <basic-container>
      <el-row :span="24">
        <!--左侧-->
        <el-col :span="13">
          <!--门禁组区域-->
          <el-form v-model="form" style="padding-left: 20px">
            <h3 style="display: inline-block">门禁组</h3>
            <el-form-item label="门禁组名称" prop="groupName">
              <el-input v-model="form.groupName" style="width: 55%;margin-left: 28px"></el-input>
            </el-form-item>
            <el-form-item label="进向推送" prop="inWhetherSend">
              <el-radio v-model="form.inWhetherSend" :label="'1'" :value="'1'" disabled style="margin-left: 44px">是
              </el-radio>
              <el-radio v-model="form.inWhetherSend" :label="'0'" :value="'0'" disabled>否</el-radio>
            </el-form-item>
            <el-form-item label="出向推送" prop="outWhetherSend">
              <el-radio v-model="form.outWhetherSend" :label="'1'" :value="'1'" disabled style="margin-left: 44px">是
              </el-radio>
              <el-radio v-model="form.outWhetherSend" :label="'0'" :value="'0'" disabled>否</el-radio>
            </el-form-item>
          </el-form>
          <!--已绑定门禁区域-->
          <h3 style="margin-left: 16px">已绑定门禁</h3>
          <avue-crud
              ref="crud"
              :data="SelectedData"
              :option="SelectedOption"
              @on-load="getListselect">
            <template slot="deviceName" slot-scope="scope">
              <span v-if="scope.row.deviceName === null">暂无数据</span>
              <span v-else-if="scope.row.deviceName === ''">暂无数据</span>
              <span v-else>{{ scope.row.deviceName }}</span>
            </template>
            <template slot="deviceAppVersion" slot-scope="scope">
              <span v-if="scope.row.deviceAppVersion == null">暂无数据</span>
              <span v-else-if="scope.row.deviceAppVersion == ''">暂无数据</span>
              <span v-else>{{ scope.row.deviceAppVersion }}</span>
            </template>
            <template slot="deviceStatus" slot-scope="scope">
              <el-tag v-if="scope.row.deviceStatus === 0" size="medium" type="primary">正常</el-tag>
              <el-tag v-if="scope.row.deviceStatus === 1" size="medium" type="danger">锁定</el-tag>
            </template>
            <template slot="direction" slot-scope="scope">
              <span v-if="scope.row.direction === 0">进</span>
              <span v-if="scope.row.direction === 1">出</span>
              <span v-if="scope.row.direction === null">暂无数据</span>
              <span v-if="scope.row.direction === ''">暂无数据</span>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button
                  class="filter-item"
                  disabled
                  size="mini"
                  type="danger">解绑
              </el-button>
            </template>
          </avue-crud>
        </el-col>

        <!--右侧-->
        <!--未绑定设备区域-->
        <el-col :span="10" style="float: right">
          <avue-crud
              ref="crud"
              :data="tableData"
              :option="tableOption"
              @on-load="getList">
            <template slot="deviceName" slot-scope="scope">
              <span v-if="scope.row.deviceName === null">暂无数据</span>
              <span v-else-if="scope.row.deviceName === ''">暂无数据</span>
              <span v-else>{{ scope.row.deviceName }}</span>
            </template>
            <template slot="deviceAppVersion" slot-scope="scope">
              <span v-if="scope.row.deviceAppVersion == null">暂无数据</span>
              <span v-else-if="scope.row.deviceAppVersion == ''">暂无数据</span>
              <span v-else>{{ scope.row.deviceAppVersion }}</span>
            </template>
            <template slot="deviceStatus" slot-scope="scope">
              <el-tag v-if="scope.row.deviceStatus === 0" size="medium" type="primary">正常</el-tag>
              <el-tag v-if="scope.row.deviceStatus === 1" size="medium" type="danger">锁定</el-tag>
            </template>
            <template slot="direction" slot-scope="scope">
              <span v-if="scope.row.direction === 0">进</span>
              <span v-if="scope.row.direction === 1">出</span>
              <span v-if="scope.row.direction === null">暂无数据</span>
              <span v-if="scope.row.direction === ''">暂无数据</span>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button v-if="scope.row.flag === true" class="filter-item" disabled size="mini" type="primary">绑定
              </el-button>
              <el-button v-else-if="scope.row.flag === false" disabled size="mini" type="primary">已绑定</el-button>
            </template>
          </avue-crud>
        </el-col>
        <!--下方按钮-->
        <el-col style="text-align: center">
          <el-button class="filter-item" size="small" @click="dictItemVisible()">返回</el-button>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import {equipListDoor, unEquipList} from '@/api/door/access'

export default {
  name: 'equipGroup-edit',
  data() {
    return {
      form: {
        groupName: '',
        inWhetherSend: '',
        outWhetherSend: '',
      },
      directions: [],
      dialogFormVisible: false,      //新增弹窗
      dialogEditVisible: false,
      tableData: [],
      SelectedData: [],
      tableLoading: false,
      SelectedOption: {  //已绑定门禁
        border: true,
        menuAlign: 'center',
        menuType: 'button',
        align: 'center',
        menuWidth: 80,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        maxHeight: 500,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '设备名',
            prop: 'deviceName',
            slot: true,
          },
          {
            label: '设备mac',
            prop: 'macAddress',
          },
          {
            label: '设备版本',
            prop: 'deviceAppVersion',
            slot: true,
          },
          {
            label: '进出向',
            prop: 'direction',
            slot: true,
          },
          {
            label: '当前状态',
            prop: 'deviceStatus',
            slot: true,
          }
        ]
      },
      tableOption: {  //所有门禁设备
        border: true,
        menuAlign: 'center',
        menuType: 'button',
        menuWidth: 80,
        align: 'center',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        maxHeight: 710,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '设备名',
            width: 154,
            prop: 'deviceName',
            slot: true,
          },
          {
            label: '设备mac',
            width: 154,
            prop: 'macAddress',
          },
          {
            label: '设备版本',
            prop: 'deviceAppVersion',
            slot: true,
          },
          {
            label: '进出向',
            prop: 'direction',
            slot: true,
          },
          {
            label: '当前状态',
            prop: 'deviceStatus',
            slot: true,
          }
        ]
      }
    }
  },
  computed: {},
  methods: {
    // 获取已选门禁
    getListselect() {
      this.tableLoading = true
      let param = this.$route.query;
      this.form = param
      let params = {
        accessControlGroupId: param.id,
        size: 999,
      }
      equipListDoor(params).then(res => {
        if (res.data.code === 0) {
          this.SelectedData = res.data.data.records
          console.log(this.SelectedData)
        }
        this.tableLoading = false
      })
    },

    //  所有门禁组数据
    getList(page, params) {
      unEquipList(Object.assign({
        descs: 'create_time',  //是否倒序
        size: 999
      }, params, this.searchForm)).then(response => {
        if (response.data.code === 0) {
          this.tableData = response.data.data
          this.tableData.map(item => {
            this.$set(item, 'flag')
            item.flag = item.isBound != true;
          })
        }
      })
      this.tableLoading = false
    },

    //返回
    dictItemVisible: function () {
      this.$router.go(-1)
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

  }
}
</script>
<style scoped>
/deep/ .avue-crud__menu {
  display: none;
}

/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}

/deep/ .avue-crud__pagination {
  display: none;
}

/deep/ .el-card__body {
  padding: 15px;
}

.radio {
  margin-right: 12px;
  padding: 0;
}

h3 {
  margin: 10px 0;
}

/deep/ .direction .el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #FFFFFF !important;
  background-color: #67c23a !important;
  border-color: #fff !important;
  -webkit-box-shadow: -1px 0 0 0 #fff !important;
  box-shadow: -1px 0 0 0 #fff !important;
}

/deep/ .direction span:hover {
  color: #67c23a !important;
}

/deep/ .el-checkbox-button__inner {
  border: 1px solid #DCDFE6 !important;
}

</style>
